<script setup lang='ts'>
import { useGetCustomer } from '@fl/api/man-api/enterprise-info-edit'
import { DownLink, SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { inject, reactive, ref } from 'vue'

const supplierId: any = inject('supplierId')

const initialState: any = {
    name: '',
}
const state = ref(cloneDeep(initialState))

const list = ref([])

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => {
    return {
        enterpriseId: supplierId,
        name: state.value.name,
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
    }
})

const { data } = useGetCustomer(params)

watchEffect(() => {
    if (data.value) {
        list.value = data.value?.records ?? []
        tablePage.value.total = data.value?.total ?? 0
    }
})

const columns: any = [
    {
        colProps: {
            span: 8,
        },
        label: '客户名称',
        prop: 'name',
    },
]

const gridOptions = reactive<any>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'name', title: '合作客户名称' },
        { field: 'startTime', title: '开始合作时间' },
        { field: 'money', title: '上年度合作金额(万元)' },
        { field: 'contractFile', slots: { default: 'contractFile' }, title: '合同附件' },
        { field: 'caseFile', slots: { default: 'caseFile' }, title: '案例附件' },
    ],
    rowConfig: {
        keyField: 'createTime',
    },
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function search(values: any) {
    tablePage.value = cloneDeep(initialPage)
    state.value = { ...state.value, ...values }
}

function reset() {
    tablePage.value = cloneDeep(initialPage)
    state.value = cloneDeep(initialState)
}

function getFileList(val: string) {
    if (val) {
        let target = []
        try {
            target = JSON.parse(val)
        }
        catch (error) {
            console.log(error)
        }
        return target
    }
    else {
        return []
    }
}
</script>

<template>
    <ElCard>
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :data="list"
        >
            <template #toolbar_buttons>
                <div class="w-full">
                    <SearchForm v-bind="state"
                                :columns="columns"
                                submit-text="查询"
                                @submit="search"
                                @reset="reset"
                    />
                </div>
            </template>

            <template #contractFile="{ row }">
                <DownLink :file-list="getFileList(row.contractFile) " />
            </template>

            <template #caseFile="{ row }">
                <DownLink :file-list="getFileList(row.caseFile)" />
            </template>
        </SearchTable>
    </ElCard>
</template>
